<template>
<!-- ref="wrapper" 方便dom操作 -->
  <div class="list" ref="wrapper">
    <div>
      <div class="present-area">
        <div class="present-title" ref="present">当前</div>
        <div class="present-button" @click="handlePresentClick()">{{this.$store.state.city}}</div>
      </div>
      <div class="hot-area">
        <div class="hot-title">热门城市</div>
        <div class="hot-list">
          <div class="hot-button" v-for="item in hotCities" :key="item.id" @click="handleCurrentClick(item.name)">{{item.name}}</div>
        </div>
      </div>
      <div class="alph-area">
        <!-- 将城市首字母传递给ref,由于此时key值唯一，所以将ref当参数传递 -->
        <div class="alph-wrapper" v-for="(item,key) of cities" :key="key" :ref="key">
          <div class="alph-title">{{key}}</div>
          <div class="alph-list">
            <div
              class="alph-button border-bottom"
              v-for="innerItem of item"
              :key="innerItem.id"
              @click="handleAlphClick(innerItem.name)"
            >{{innerItem.name}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 1.安装better-scroll ： npm install better-scroll --save
// 2.引入better-scroll 移动端列表滚动
import BScroll from 'better-scroll'
// map4.在页面内使用百度地图
import BMap from 'BMap'
export default {
  name: "locationList",
  // 接收父组件location传递过来的letter值,  其它派发的值
  props:{
    letter: String,
    cities: Object,
    hotCities: Array
  },
  methods:{
    // 当点击热门城市时，携带信息并调回首页
    handleCurrentClick(city){
      /**
       *  二者区别：
       * dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutations方法名',值)
       * commit：同步操作，写法：this.$store.commit('mutations方法名',值)
      */
      this.$store.dispatch('change',city)
      // 跳转回首页
      this.$router.push('/')
    },
    // 当点击列表页时，携带信息并跳回首页
    handleAlphClick(city){
      this.$store.dispatch('change',city)
      this.$router.push('/')
    },
    // 点击当前按钮，跳回首页
    handlePresentClick(){
      this.$router.push('/')
    }
  },
  // 监听letter
  watch:{
    letter(){
      // 此时ref是动态传值,热门城市首字母
      const elementLetter =this.$refs[this.letter]
      // 当前城市
      const elementPresent=this.$refs.present
      if(elementLetter){
        const element = elementLetter[0]
        // 跳转到指定的dom节点
        this.scroll.scrollToElement(element)
      }else{
        this.scroll.scrollToElement(elementPresent)
      }
    }
  },
  data() {
    return {
      city: ''
    }
  },
  mounted(){
    // 获取wrapper dom节点
        //3. 使用better-scroll
    this.scroll = new BScroll(
      this.$refs.wrapper,{
        click:true,
        mouseWheel:{
          speed: 20,
          invert: false,
          easeTime: 300
        }
      }
    )
  }
};
</script>

<style lang="stylus" scoped>
.border-bottom {
  // &指向最近的选择器
  &:before {
    border: 0.04rem solid #ccc;
  }
}

.list {
  overflow: hidden
  background: #F1F3F4;
  //固定better-scorll 视图的位置
  position absolute
  top: 1.12rem
  left: 0
  bottom : 0
  width: 100%
  .hot-list {
    overflow: hidden;
  }

  .present-title, .hot-title, .alph-title {
    margin-left: 0.4rem;
    padding: 0.4rem 0;
  }

  .hot-title {
    margin-bottom: -0.3rem;
  }

  .present-button, .hot-button, .alph-button {
    line-height: 0.44rem;
    padding: 0.2rem 0.2rem;
    background: #ffff;
  }

  .present-button {
    width: 84%;
    margin-left: 0.2rem;
  }

  .hot-button {
    width: 15%;
    float: left;
    margin-left: 0.2rem;
    text-align: center;
    margin-top: 0.2rem;
  }

  .alph-button {
    width: 100%;
    padding-left: 0.4rem;
  }
}
</style>